<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线音乐网</title>
    <link href="{{ url_for('static', filename='css/pt_discover_index.css')}}" type="text/css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/pt_frame.css')}}" type="text/css" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/jquery-2.2.0.min.js')}}" type="text/javascript"></script>
    <script src="{{ url_for('static', filename='js/layer/layer.js')}}" type="text/javascript"></script>
    <script src="{{ url_for('static', filename='js/jsArr01.js')}}" type="text/javascript"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/toolTip/tooltip.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-2.2.0.min.js') }}"></script>
</head>
<body>
<div id="g-topbar" class="g-topbar" style="width:1000px;margin:auto">
    <div class="m-top">
     <a href=" {{ url_for('home.index') }}" style="background-image: url({{ url_for('static',filename='image/img.png') }});
        background-size: 100px 70px;
    background-repeat: no-repeat;
     background-position: center;

    display: block;
    width: 100px;
    height: 55px;margin-left:10px;margin-top:5px;">logo</a>
        <div class="wrap">
<ul class="m-nav j-tflag" style="width:600px;margin-top:-60px;">
    <li class="fst" style="margin-right:40px;margin-left:200px;">
        <span><a style="font-size:20px;" href="{{ url_for('home.search') }}" data-module="discover" class="menuTab ajaxLink">搜索音乐</a></span>
    </li>
    <li style="margin-right:40px;">
        <span><a style="font-size:20px;" href="{{ url_for('home.collectList') }}" class="menuTab ajaxLink">我的收藏</a></span>
    </li>
    <li style="margin-right:40px;"><a style="font-size:20px;" href="{{ url_for('home.toplist') }}" data-module="toplist" class="menuTab ajaxLink">排行榜</a></li>
    <li><a style="font-size:20px;" href="{{ url_for('home.styleList') }}" data-module="playlist" class="menuTab ajaxLink">曲风</a></li>
</ul>



            {% if session['username'] %}
                <div class="m-tophead f-pr j-tflag" style="margin-top:-25px;">
                    <a  style=font-size:15px id="userTooltip" class="tooltip" style="color:#1C2021">您好，{{ session['username'] }}</a>
                    <div id="userActions" style="display: none">
                        {% if session['flag'] != 0 %}
                            <a style=font-size:15px href="{{ url_for('home.manageArtist') }}">后台管理</a>
                        {% endif %}

                        <a style=font-size:15px href="{{ url_for('home.modifyPassword') }}">修改密码</a><br/>
                        <a style=font-size:15px id="blogUrl" href="{{ url_for('home.logout') }}">退出</a>
                    </div>
                </div>
            {% else %}
                <div class="m-tophead f-pr j-tflag" style="margin-top:-40px;font-size:18px">
                    <a href="{{ url_for('home.login') }}" id="login" style="color:#1C2021;font-size:15px">登录</a>
                    <a href="{{ url_for('home.register') }}" id="register"  style="color:#1C2021;font-size:15px">注册</a>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="m-subnav m-subnav-up f-pr j-tflag f-hide">
        <div class="shadow">&nbsp;</div>
    </div>
</div>
<div id="discover-module" class="g-bd1 f-cb" style="margin:auto;">
    <div class="g-mn1">
        <div class="g-mn1c">
            <div class="g-wrap3" style="width:700px;">
                <div class="n-rcmd">
                    <div class="v-hd2">
                        <a href="#" class="tit f-ff2 f-tdn">热门歌手</a>
                    </div>
                    <ul class="m-cvrlst f-cb" style="width:800px;margin-bottom:100px;">
                        {% for artist in hot_artist %}
                        <li>
                            <div class="u-cover u-cover-1">
                                <a href="{{url_for('home.artist',id=artist.id)}}">
                                    <img style=margin-bottom:10px src="{{url_for('static',filename='/artist/'+artist.imgURL)}}">
                                    <p style="margin-left:50px;font-size:20px;margin-top:-10px;">{{ artist.artistName }}</p>
                                </a>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="g-sd1">
        <div class="n-dj n-dj-1">
            <h1 class="v-hd3">
                热门歌曲
            </h1>
            <ul class="n-hotdj f-cb" id="hotdj-list">
                {% for song in hot_song %}
                <li>
                    <div class="info">
                        <p>
                            <a onclick='playA("{{song.songName}}","{{song.id}}");' style="color: #1096A9">{{song.songName}} </a>
                            <sup class="u-icn u-icn-1"></sup>
                        </p>
                        <p class="f-thide s-fc3">
                            歌手：{{song.singer}}
                        </p>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
<script>
    function playA(name, id) {
        window.parent.playMusic(name,id);
    }

$(document).ready(function() {
    // 确保ajaxLink类的链接被选中
    $('a.ajaxLink').on('click', function(e) {
        {#e.preventDefault(); // 阻止默认链接行为#}

        var url = $(this).attr('href'); // 获取链接的URL
        console.log("Requested URL:", url); // 打印请求的URL，帮助调试

        // 发送AJAX请求
        $.ajax({
            url: url,
            type: 'GET',
            success: function(data) {
                $('#main-content').html(data); // 将数据加载到main-content元素中
                console.log("Content loaded successfully."); // 打印成功信息，帮助调试
            },
            error: function(xhr, status, error) {
                alert("无法加载内容: " + error); // 显示错误信息
                console.error("AJAX error:", status, error); // 打印错误详情，帮助调试
            }
        });
    });
});

</script>
<script>
    $(document).ready(function() {

       // Show user actions on mouse enter
       $("#userTooltip").on("mouseenter", function () {
           $("#userActions").show();
       });

       // Hide user actions on mouse leave from tooltip
       $("#userTooltip").on("mouseleave", function () {
           setTimeout(function() {
               $("#userActions").hide();
           }, 3000); // 300 milliseconds delay before hiding
       });

       // Hide user actions on mouse leave from actions
       $("#userActions").on("mouseleave", function () {
           setTimeout(function() {
               $("#userActions").hide();
           }, 3000); // 300 milliseconds delay before hiding
       });

       // Logout functionality
       $('#Del').click(function () {
           // Make sure the logic for logout is correct
       });

   });
</script>
</body>
</html>
